// 佣金设置页面
<template>
  <div>

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>{{this.username}} ->赔率差</span>
      </ul>

      <ul class="bread-nav-content-right">
        <a class="back" @click="goBack">返回</a>
      </ul>
    </el-row>

    <div class="content" v-if="list">

      <el-row>
        <div>
          <ul>
            <li class="topNavTitle">
              <button class="topNav" @click="goSet">
                基本资料
              </button>
              <button class="topNav" @click="goComm">
                退水设定
              </button>
              <button v-if="parseInt(info.level) === 0 || parseInt(info.level) === 1" class="topNav topNavSelected">
                赔率差设定
              </button>
            </li>
          </ul>
        </div>
      </el-row>

      <el-row v-if="lotteryType.length > 0" class="content-info-nav">
        <button v-for="(item,index) in lotteryType" :key="index" class="content-info-nav-button" :class="nowSelectedLotteryType === item?'':'lotteryTypeSelected'">
          {{item}}
        </button>
        <ul class="content-info-nav-input">
          <span>修改赔率差：</span>
          <input type="text" v-model="setOdds"  @keydown="onlyNum(setOdds, $event)">
          <button @click="setOddsBtn">
            确认
          </button>
        </ul>
      </el-row>

      <table class="myTable" v-if="catalogList">
        <thead>
        <tr>
          <th>
            种类
          </th>
          <th v-for="(item,index) in commType" :key="index">
            {{item.showName}}
          </th>
          <th>
            操作
          </th>
        </tr>
        </thead>
        <tbody>
        <tr class="topTr" v-for="(item,key,index1) in catalogList[nowSelectedLotteryType]" :key="index1">
          <td class="specificTableTd deepColor" :class="'color'+key">{{item.category_name}}</td>
          <td v-if="commType.a_diff !== undefined">
            <input type="text" class="topInput" v-model="item.a_diff" @keydown="onlyNum(item.a_diff, $event)">
          </td>
          <td v-if="commType.b_diff !== undefined">
            <input type="text" class="topInput" v-model="item.b_diff" @keydown="onlyNum(item.b_diff, $event)">
          </td>
          <td v-if="commType.c_diff !== undefined">
            <input type="text" class="topInput" v-model="item.c_diff" @keydown="onlyNum(item.c_diff, $event)">
          </td>
          <td v-if="commType.d_diff !== undefined">
            <input type="text" class="topInput" v-model="item.d_diff" @keydown="onlyNum(item.d_diff, $event)">
          </td>
          <td>
            <button @click="changeLimitsList(key)">修改</button>
          </td>
        </tr>
        </tbody>
      </table>

      <div v-for="(infoList,key,index) in list[nowSelectedLotteryType]" :key="index" class="content-info">
        <el-row class="content-info-nav">
          <button class="content-info-nav-button">
            {{key}}
          </button>
          <span v-if="infoList['0'][0].is_default === 1">【预设】</span>
        </el-row>
        <table class="upTable">
          <tr>
            <td v-for="(subList,subIndex) in infoList" :key="subIndex" class="upTableTd">
              <table class="myTable">
                <thead>
                <tr>
                  <th>
                    种类
                  </th>
                  <th v-for="(item,index) in commType" :key="index">
                    {{item.showName}}
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,subIndex1) in subList" :key="subIndex1" class="myTableTr">
                  <td class="specificTableTd deepColor" :class="'color'+item.category_code">{{item.odds_diff_name}}</td>
                  <td v-if="commType.a_diff !== undefined">
                    <div>
                      <input type="text" v-model="item.a_diff" @keydown="onlyNum(item.a_diff, $event)" @change="changeText(item.a_diff, item.parent.a_diff, item.level, key, subIndex, subIndex1, 1)" :class="{'change':item.init.a_diff != item.a_diff}"/>
                    </div>
                    <div>(
                      <span>
                          {{item.parent.a_diff === undefined?'--':item.parent.a_diff}}
                      </span>)
                    </div>
                    <div>(
                      <span>
                          {{getNewOdds(item.a_odds, item.a_diff, item.parent.a_diff)}}
                      </span>)
                    </div>
                  </td>
                  <td v-if="commType.b_diff !== undefined">
                    <div>
                      <input type="text" v-model="item.b_diff" @keydown="onlyNum(item.b_diff, $event)" @change="changeText(item.b_diff, item.parent.b_diff, item.level, key, subIndex, subIndex1, 2)" :class="{'change':item.init.b_diff != item.b_diff}"/>
                    </div>
                    <div>(
                      <span>
                        {{item.parent.b_diff  === undefined?'--':item.parent.b_diff}}
                        </span>)
                    </div>
                    <div>(
                      <span>
                          {{getNewOdds(item.b_odds, item.b_diff, item.parent.b_diff)}}
                      </span>)
                    </div>
                  </td>
                  <td v-if="commType.c_diff !== undefined">
                    <div>
                      <input type="text" v-model="item.c_diff" @keydown="onlyNum(item.c_diff, $event)" @change="changeText(item.c_diff, item.parent.c_diff, item.level, key, subIndex, subIndex1, 3)" :class="{'change':item.init.c_diff != item.c_diff}"/>
                    </div>
                    <div>(
                      <span>
                        {{item.parent.c_diff === undefined?'--':item.parent.c_diff}}
                      </span>)
                    </div>
                    <div>(
                      <span>
                          {{getNewOdds(item.c_odds, item.c_diff, item.parent.c_diff)}}
                      </span>)
                    </div>
                  </td>
                  <td v-if="commType.d_diff !== undefined">
                    <div>
                      <input type="text" v-model="item.d_diff" @keydown="onlyNum(item.d_diff, $event)" @change="changeText(item.d_diff, item.parent.d_diff, item.level, key, subIndex, subIndex1, 4)" :class="{'change':item.init.d_diff != item.d_diff}"/>
                    </div>
                    <div>(
                      <span>
                        {{item.parent.d_diff === undefined?'--':item.parent.d_diff}}
                      </span>)
                    </div>
                    <div>(
                      <span>
                          {{getNewOdds(item.d_odds, item.d_diff, item.parent.d_diff)}}
                      </span>)
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>

      </div>

      <el-row class="bottom">
        <button @click="submit">保存</button>
        <button @click="reset">取消</button>
        <ul class="redColor">
          赔率显示只显示当前玩法第一个赔率，例如：重庆时时彩-前三-A盘显示为【豹子】的赔率，【顺子】 【对子】等同样会依据所填写的差值自动变化
        </ul>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { formatFloat } from '@/utils/index'
  import { user as userMap } from '@/utils/map' // 参数映射

  export default {
    name: 'odds', // 用户信息页
    data() {
      return {
        setOdds: null,
        setParams: '', // 跳转到基本信息需要的参数
        downline: 1,
        params: {}, // 要提交保存的表单
        username: null, // 用户名称
        // games: null, //游戏列表
        loading: false,
        list: null, // 详细表格数据源  array
        handicaps: null, // 提成盘口
        game_code: null, // 以game_code作为tab的key
        userMap: userMap, // 用户字段映射
        lotteryType: '',
        nowSelectedLotteryType: '',
        commType: {
          'a_diff': {
            field: 'a_diff',
            showName: 'A盘(%)',
            step: 0.0001,
            min: 0,
            max: 100,
          },
          'b_diff': {
            field: 'b_diff',
            showName: 'B盘(%)',
            step: 0.0001,
            min: 0,
            max: 100,
          },
          'c_diff': {
            field: 'c_diff',
            showName: 'C盘(%)',
            step: 0.0001,
            min: 0,
            max: 100,
          },
          'd_diff': {
            field: 'd_diff',
            showName: 'D盘(%)',
            step: 0.0001,
            min: 0,
            max: 100,
          },
        },
        catalogList: { // 提成分类列表数据源  array
          快开彩: {
            11: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '11',
              category_name: '号码类(球号、车号、正号等)',
            },
            12: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '12',
              category_name: '两面类(大小、单双、龙虎、三军等)',
            },
            13: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '13',
              category_name: '多项类(方位、中发白、共和过关等)',
            },
            14: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '14',
              category_name: '连码类(任选二、任选三、前二组选等)',
            },
            15: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '15',
              category_name: '其它(冠亚和、前中后三等)',
            },
          },
          香港彩: {
            21: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '21',
              category_name: '号码类',
            },
            22: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '22',
              category_name: '两面类',
            },
            23: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '23',
              category_name: '多项类',
            },
            24: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '24',
              category_name: '连码类',
            },
            25: {
              a_diff: 0,
              b_diff: 0,
              c_diff: 0,
              d_diff: 0,
              category_code: '25',
              category_name: '其它',
            },
          },
        },

        quickSetup: {
          '11': [], // 游戏大类分类/号码类
          '12': [], // 游戏大类分类/两面类
          '13': [], // 游戏大类分类/多项类
          '14': [], // 游戏大类分类/连码类
          '15': [], // 游戏大类分类/其它
        },
      }
    },
    filters: {
      formatFloat: formatFloat, // 格式化保留两位小数,
    },
    created() {
      if (this.$route.params.username) {
        this.username = this.$route.params.username
      } else {
        // 报错
        this.$message({
          message: '获取用户参数错误!',
          type: 'warning',
        })
        return
      }
      console.log(this.$route.params)
      this.setParams = this.$route.params
      this.$store.dispatch('GameOptionss')
        .then(() => {
          this.game_code = this.gameOptions[0].game_code
          this.getSetting()
        })
    },
    computed: { ...mapGetters(['info', 'gameOptions']) },
    methods: {
      // 计算赔率差并返回
      getNewOdds(odds, diff, parentDiff) {
        if (odds) {
          parentDiff = parentDiff ? parentDiff : 0 // 如果为空则默认为0
          return Math.round((odds - (parentDiff - diff)) * 100000) / 100000
        } else {
          return '--'
        }
      },
      onlyNum(value, e) {
        let isOK = false
        const key = window.event ? e.keyCode : e.which
        if ((key > 95 && key < 106) || // 小键盘上的0到9
          (key > 47 && key < 60) || // 大键盘上的0到9
          (key === 110 && value.indexOf('.') < 0) || // 小键盘上的.而且以前没有输入.
          (key === 190 && value.indexOf('.') < 0) || // 大键盘上的.而且以前没有输入.
          key === 8 || key === 9 || key === 46 || key === 37 || key === 39 // 不影响正常编辑键的使用(8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
        ) {
          isOK = true
        } else {
          if (window.event) { // IE
            e.returnValue = false // event.returnValue=false 效果相同.
          } else { // Firefox
            e.preventDefault()
          }
        }
        e.returnValue = isOK
      },
      setOddsBtn() {
        for (const index in this.list[this.nowSelectedLotteryType]) {
          for (const subIndex in this.list[this.nowSelectedLotteryType][index]) {
            for (const key in this.list[this.nowSelectedLotteryType][index][subIndex]) {
              const temp = this.list[this.nowSelectedLotteryType][index][subIndex][key]
              if (temp.a_odds !== undefined) {
                let num = parseFloat(temp.init.a_odds) - parseFloat(this.setOdds)
                num = Math.round(num * 100000) / 100000
                temp.a_diff = parseFloat(num) > 0 ? num : 0
              }
              if (temp.b_odds !== undefined) {
                let num = parseFloat(temp.init.b_odds) - parseFloat(this.setOdds)
                num = Math.round(num * 100000) / 100000
                temp.b_diff = parseFloat(num) > 0 ? num : 0
              }
              if (temp.c_odds !== undefined) {
                let num = parseFloat(temp.init.c_odds) - parseFloat(this.setOdds)
                num = Math.round(num * 100000) / 100000
                temp.c_diff = parseFloat(num) > 0 ? num : 0
              }
              if (temp.d_odds !== undefined) {
                let num = parseFloat(temp.init.d_odds) - parseFloat(this.setOdds)
                num = Math.round(num * 100000) / 100000
                temp.d_diff = parseFloat(num) > 0 ? num : 0
              }
            }
          }
        }
      },
      goComm() {
        this.$router.push({
          name: 'user_commission',
          params: this.setParams,
        })
      },
      goSet() {
        this.$router.push({
          name: 'user_update',
          params: this.setParams,
        })
      },
      changeText(value, parentValue, level, index, subIndex, subIndex1, type) {
        let infoType = ''
        let oddType = ''
        if (type === 1) {
          infoType = 'a_diff'
          oddType = 'a_odds'
        }
        if (type === 2) {
          infoType = 'b_diff'
          oddType = 'b_odds'
        }
        if (type === 3) {
          infoType = 'c_diff'
          oddType = 'c_odds'
        }
        if (type === 4) {
          infoType = 'd_diff'
          oddType = 'd_odds'
        }
        if (!(parseInt(this.setParams.level) === 1 || parseInt(this.setParams.level) === 0)) {
          const item = JSON.parse(JSON.stringify(this.list[this.nowSelectedLotteryType][index][subIndex][subIndex1]))
          if (level === 1) {
            console.log(this.getNewOdds(item[oddType], value, parentValue), !(this.getNewOdds(item[oddType], value, parentValue) >= 1))
            if (!(this.getNewOdds(item[oddType], value, parentValue) >= 1)) {
              alert('输入值不合法，请重新输入')
              this.list[this.nowSelectedLotteryType][index][subIndex][subIndex1][infoType] = item.init[infoType]
            }
          } else if (level > 1) {
            if (!(value >= parentValue && this.getNewOdds(item[oddType], value, parentValue) >= 1)) {
              alert('输入值不合法，请重新输入')
              this.list[this.nowSelectedLotteryType][index][subIndex][subIndex1][infoType] = item.init[infoType]
            }
          } else {
            alert('输入值不合法，请重新输入')
          }
        }
      },
      reset() {
        for (const key in this.list) {
          for (const index in this.list[key]) {
            for (const subIndex in this.list[key][index]) {
              for (const subItemIndex in this.list[key][index][subIndex]) {
                const tempInit = this.list[key][index][subIndex][subItemIndex]
                for (const infoIndex in this.list[key][index][subIndex][subItemIndex]) {
                  if (!(infoIndex === 'init' || infoIndex === 'parent')) {
                    this.list[key][index][subIndex][subItemIndex][infoIndex] = JSON.parse(JSON.stringify(tempInit.init[infoIndex]))
                  }
                }
              }
            }
          }
        }
        this.$forceUpdate()
      },
      submit() {
        const tempSubParams = []
        for (const key in this.list) {
          for (const index in this.list[key]) {
            for (const subIndex in this.list[key][index]) {
              for (const subItemIndex in this.list[key][index][subIndex]) {
                const tempInit = this.list[key][index][subIndex][subItemIndex]
                let tempSubParamsList = {}
                for (const infoIndex in this.list[key][index][subIndex][subItemIndex]) {
                  const tempInfo = this.list[key][index][subIndex][subItemIndex][infoIndex]
                  if (infoIndex === 'a_diff' && tempInit.init[infoIndex] !== tempInfo) {
                    tempSubParamsList = {
                      k: tempInit.game + '_' + tempInit.item_id + '_' + 'a',
                      v: tempInfo,
                    }
                    tempSubParams.push(tempSubParamsList)
                  }
                  if (infoIndex === 'b_diff' && tempInit.init[infoIndex] !== tempInfo) {
                    tempSubParamsList = {
                      k: tempInit.game + '_' + tempInit.item_id + '_' + 'b',
                      v: tempInfo,
                    }
                    tempSubParams.push(tempSubParamsList)
                  }
                  if (infoIndex === 'c_diff' && tempInit.init[infoIndex] !== tempInfo) {
                    tempSubParamsList = {
                      k: tempInit.game + '_' + tempInit.item_id + '_' + 'c',
                      v: tempInfo,
                    }
                    tempSubParams.push(tempSubParamsList)
                  }
                  if (infoIndex === 'd_diff' && tempInit.init[infoIndex] !== tempInfo) {
                    tempSubParamsList = {
                      k: tempInit.game + '_' + tempInit.item_id + '_' + 'd',
                      v: tempInfo,
                    }
                    tempSubParams.push(tempSubParamsList)
                  }
                }
              }
            }
          }
        }
        const params = {
          username: this.username,
          params: tempSubParams,
        }
        console.log('123456798', params)
        if (params.params.length > 0) {
          if (window.confirm('你确定要提交修改吗？')) {
            this.$store.dispatch('SaveOdds', params)
              .then(response => {
                if (response.status) {
                  this.getSetting()
                }
                alert(response.message)
              })
            return true
          } else {
            return false
          }
        } else {
          alert('请先修改数据')
        }
      },
      // 上方修改按钮事件
      changeLimitsList(lotteryType) {
        for (const index in this.list[this.nowSelectedLotteryType]) {
          for (const subIndex in this.list[this.nowSelectedLotteryType][index]) {
            for (const key in this.list[this.nowSelectedLotteryType][index][subIndex]) {
              const temp = this.list[this.nowSelectedLotteryType][index][subIndex][key]
              if (temp.category_code === lotteryType) {
                if (temp.a_diff !== undefined) {
                  temp.a_diff = this.catalogList[this.nowSelectedLotteryType][lotteryType].a_diff
                }
                if (temp.b_diff !== undefined) {
                  temp.b_diff = this.catalogList[this.nowSelectedLotteryType][lotteryType].b_diff
                }
                if (temp.c_diff !== undefined) {
                  temp.c_diff = this.catalogList[this.nowSelectedLotteryType][lotteryType].c_diff
                }
                if (temp.d_diff !== undefined) {
                  temp.d_diff = this.catalogList[this.nowSelectedLotteryType][lotteryType].d_diff
                }
              }
            }
          }
        }
      },

      goBack() {
        this.$router.go(-1)
      },
      // 根据用户盘口,删除不存在的盘口
      formatCommissionType() {
        for (const key in this.commType) {
          if (this.commType.hasOwnProperty(key)) {
            const element = this.commType[key]
            if (key > 0 && key < 10 && this.handicaps.indexOf(key) < 0) {
              delete this.commType[key] // 删除不存在的盘口
            }
          }
        }
      },
      // 获取父级commission设置
      getSetting() {
        this.loading = true
        this.$store
          .dispatch('GetOddsdatas', { username: this.username })
          .then(response => {
            this.loading = false
            console.log('获取父级commission设置', response)
            if (
              // 庄家没有commission返回
              response &&
              response.parent_odds_diff_list &&
              response.child_odds_diff_list
            ) {
              this.handicaps = response.handicaps
              // 根据user的handicaps,更新userMap.commissionType 删除不存在的盘口
              // this.formatCommissionType()
              // 格式化目录数据列
              // 格式化目录数据列表 甲方说数据写死，这里就暂时不用，先注释了，以后怕又要用
              // *******************************
              //  this.formatCatalogCommission(response.category_odds_diff)
              // *******************************
              // 格式化表格数据列表
              this.formatCommissionList(
                response.child_odds_diff_list,
                response.parent_odds_diff_list
              )
              this.params = {}
            }
          })
      },

      // 格式化 catalogCommission
      formatCatalogCommission(category_min) {
        const res = []
        for (const key in category_min) {
          res[key] = {}
          for (const category_code in category_min[key]) {
            res[key][category_code] = []
            if (category_min[key].hasOwnProperty(category_code)) {
              const item = category_min[key][category_code]
              item['category_code'] = category_code
              item['category_name'] = this.userMap.gameCatalogCode[key][category_code].name
              item['init'] = JSON.parse(JSON.stringify(item)) // 保存自身初始值 ,用于金额判断
              // for (const key in this.commType[key]) {
              //   if (this.commType[key].hasOwnProperty(key)) {
              //     const element = this.commType[key]
              //     item[`${element.field}_highlight_class`] = '' // 根据k添加对应高亮样式
              //   }
              // }
              res[key][category_code] = JSON.parse(JSON.stringify(item))
            }
          }
        }
        console.log('111111111111', res)
        this.catalogList = res
      },

      // 格式化列表
      formatCommissionList(...args) {
        const [self, parent] = args
        const res = {}
        this.lotteryType = []
        let i = 0
        for (const lottery_code in self) {
          res[lottery_code] = {}
          this.lotteryType.push(lottery_code)
          if (self.hasOwnProperty(lottery_code)) {
            const lottery = self[lottery_code]
            if (parseInt(this.setParams.level) === 1 || parseInt(this.setParams.level) === 0) {
              parent[lottery_code] = {}
            }

            for (const game_code in lottery) {
              res[lottery_code][game_code] = {}
              const game = lottery[game_code]
              let listI = 0
              const listHalfLength = parseInt(Object.keys(game).length / 2) + 1
              res[lottery_code][game_code][0] = []
              res[lottery_code][game_code][1] = []

              if (parseInt(this.setParams.level) === 1 || parseInt(this.setParams.level) === 0) {
                parent[lottery_code][game_code] = {}
              }

              for (const item_code in game) {
                if (game.hasOwnProperty(item_code)) {
                  if (parseInt(this.setParams.level) === 1 || parseInt(this.setParams.level) === 0) {
                    parent[lottery_code][game_code][item_code] = 0
                  }

                  const item = game[item_code]
                  item['init'] = JSON.parse(JSON.stringify(item)) // 保存自身初始值 ,用于金额判断
                  item['parent'] = parent[lottery_code][game_code][item_code] // 保存父级item信息,用于金额判断

                  // for (const key in this.commType) {
                  //   if (this.commType.hasOwnProperty(key)) {
                  //     const element = this.commType[key]
                  //     item[`${element.field}_highlight_class`] = '' // 根据k添加对应高亮样式
                  //   }
                  // }
                  const tempItem = JSON.parse(JSON.stringify(item))
                  if (listI < listHalfLength) {
                    res[lottery_code][game_code][0].push(tempItem)
                  } else {
                    res[lottery_code][game_code][1].push(tempItem)
                  }
                  listI++

                  i++

                  if (i === 1) {
                    for (const subItem in game[item_code]) {
                      this.tempCommType += subItem + ','
                    }
                  }
                }
              }
            }
          }
        }
        for (const key in this.commType) {
          if (this.commType.hasOwnProperty(key)) {
            if (this.tempCommType.indexOf(key) < 0) {
              delete this.commType[key] // 删除不存在的盘口
            }
          }
        }

        this.nowSelectedLotteryType = this.lotteryType[0]

        for (const key in this.quickSetup) {
          for (const index in this.commType) {
            this.quickSetup[key][index] = this.commType[index].max
          }
        }
        console.log('-----------', res)
        console.log('-----------', this.commType)

        this.list = res
      },

      // 目录input变化 导致同catalogcode的input一起变化
      catalogInputChange(...args) {
        this.$nextTick(_ => {
          // 获取回调后的值才是最新的值
          const [key_name, rowIndex, row] = args
          const valueInit = row.init[key_name] // 初始值,
          const valueInput = row[key_name] // 输入值
          // 添加cattaloginput高亮样式
          if (valueInit !== valueInput) {
            this.catalogList[rowIndex][`${key_name}_highlight_class`] =
              'hightlight'
          } else {
            this.catalogList[rowIndex][`${key_name}_highlight_class`] = ''
          }

          // console.log(valueInput, valueMax, this.catalogList);
          for (const game_code in this.list) {
            if (this.list.hasOwnProperty(game_code)) {
              // 这里为什么要用hasOwnProperty进行过滤呢？
              // 因为for...in 循环会把对象原型链上的所有可枚举属性都循环出来
              const game = this.list[game_code]
              for (const i in game) {
                if (game.hasOwnProperty(i)) {
                  const item = game[i]

                  if (item.category_code === row.category_code) {
                    item[key_name] = valueInput // 根据目录输入,批量修改对应的表格值
                    // 添加高亮样式  与自身初始值不一致 ##最佳实现,与自身初始值对比
                    if (item.init[key_name] !== valueInput) {
                      item[`${key_name}_highlight_class`] = 'hightlight'
                      this.params[`${item.item_code}-${key_name}`] = item // 保存修改的item
                    } else {
                      // 删除样式
                      item[`${key_name}_highlight_class`] = ''
                      delete this.params[`${item.item_code}-${key_name}`] // 删除未修改行
                    }
                  }
                }
              }
            }
          }
          // console.log(this.params, Object.keys(this.params).length);
        })
      },

      // 表格input的变化
      cellChange(...args) {
        this.$nextTick(_ => {
          // 获取回调后的值才是最新的值
          const [key_name, rowIndex, row] = args
          const valueMax = row.parent[key_name] // 最大值,
          const valueInit = row.init[key_name] // 初始值,
          const valueInput = row[key_name] // 输入值
          if (parseFloat(valueInput) !== parseFloat(valueInit)) {
            // highlight
            row[`${key_name}_highlight_class`] = 'hightlight'
            // 保存修改的item
            this.params[`${row.item_code}-${key_name}`] = row
          } else {
            row[`${key_name}_highlight_class`] = ''
            delete this.params[`${row.item_code}-${key_name}`] // 删除未修改行
          }

          console.log(valueInit, valueInput)
          console.log(Object.keys(this.params).length)

          // console.log(valueMax, valueInit, valueInput, key_name);
        })
      },
      onSubmit() {
        // console.log(this.params);
        const ob = {}
        for (const k in this.params) {
          if (this.params.hasOwnProperty(k)) {
            const row = this.params[k]
            const [item_code, key_name] = k.split('-')
            if (typeof ob[item_code] === 'undefined') {
              ob[item_code] = {}
            }
            ob[item_code]['game_code'] = row.game_code
            ob[item_code]['item_code'] = row.item_code
            ob[item_code][key_name] = row[key_name]
          }
        }
        // console.log(ob, Object.values(ob).length);
        const params = Object.values(ob)
        if (params.length <= 0) {
          // 没有修改
          this.$message({
            message: '没有金额变化的条目!',
            type: 'warning',
          })
        } else {
          this.loading = true
          this.$store
            .dispatch('SetCommissions', {
              username: this.username,
              params: params,
            })
            .then(response => {
              this.loading = false
              if (response === true) {
                this.$alert('修改成功', '提示', {
                  confirmButtonText: '确定',
                  center: true,
                  callback: this.getSetting,
                })
              } else {
                this.$message({
                  message: '修改失败',
                  type: 'warning',
                })
              }
            })
            .catch(error => {
              this.loading = false
              console.log(error)
              // this.$message({
              //   message: error.message,
              //   type: "warning"
              // });
            })
        }
      },
      // 表格样式
      CatalogCellClass({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1) {
          return this.userMap.gameCatalogCode[row.category_code].className
        }
        // console.log(row, column, rowIndex, columnIndex);
      },
    },
    watch: {},
  }
</script>

<style scoped>
  .topNavTitle{
    height: 29px;
    line-height: 29px;
    background: url(/static/agent/img/tab_bg02.gif) repeat-x left -93px;
  }
  .topNav{
    display: block;
    width: 98px;
    height: 29px;
    font-size: 13px;
    color: #7d7d7d;
    background: url(/static/agent/img/tab_bg02.gif) no-repeat left -29px;
    text-shadow: 1px 1px 0 white;
    margin: 0 5px 0 0;
    text-align: center;
    float: left;
    text-decoration: none;
    border:none;
  }
  .topNavSelected{
    color: #274D98;
    /* font-weight: bold; */
    background: url(/static/agent/img/tab_bg02.gif) no-repeat left top;
  }
  .topNav:hover{
    color: #274D98;
    /* font-weight: bold; */
    background: url(/static/agent/img/tab_bg02.gif) no-repeat left top;
  }

  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }

  .content{
    padding:10px;
  }

  .content-info{
    width: 100%;
    padding-top: 5px;
  }
  .content-info-nav{
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
  }
  .content-info-nav span{
    color:red;
    padding:8px 0;
    font-weight: 600;
  }
  .content-info-nav-button{
    color:#ffffff;
    border:0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #386bad;
    height:30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
  }
  .content-info-nav-button:hover{
    text-decoration: underline;
  }
  .lotteryTypeSelected{
    background-color: #dcdcdc;
    color:#535353;
  }
  .content-info-nav-input{
    line-height: 30px;
    padding-left: 20px;
    font-size: 13px;
  }
  .content-info-nav-input button{
    padding: 0;
  }

  .topTr{

  }
  .topTr td > .topInput{
    width:100px !important;
    max-width: 120px !important;
  }
  .upTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .upTableTd{
    vertical-align: top;
    width:50%;
  }

  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 18px;
    font-size:13px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #131950;
    line-height: 18px;
    font-size:13px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .myTable td div{
    max-height: 22px;
  }
  .myTable td input[type='text']{
    text-align: center;
    width:60px;
    max-width:100px;
    border: #abb2c5 1px solid;
  }
  .myTableTr:hover{
    background-color: #deedfe;
  }
  .deepColor{
    background-color: #F2F2F2;
    width: 240px;
    font-weight: bold;
    background-image: url(/static/agent/img/td_ts.png);
    background-repeat: no-repeat;
  }

  .bottom{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    line-height: 30px;
    font-size:13px;
  }
  .bottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0px;
    background-color: #487BD1;
    border-radius: 5px;
    margin-left: 10px;
  }
  .bottom button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }
  .redColor{
    color:red !important;
  }
  .color11{
    background-position: right top;
  }
  .color12{
    background-position: right -240px;
  }
  .color13{
    background-position: right -320px;
  }
  .color14{
    background-position: right -160px;
  }
  .color15{
    background-position: right -80px;
  }

  .change{
    background-color: aqua;
  }
</style>
